import { useState } from 'react'
import './index.css'
interface PictureCardProps{
    word:string,
    submit:(data:string)=>void,
    audio:string
}
export default function PictureCard({ word,submit,audio }: PictureCardProps) {

    const [imgPreview, setImgPreview] = useState('https://res.bearbobo.com/resource/upload/W44yyxvl/upload-ih56twxirei.png')
    const updateImageData = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0]
        if (!file) return
        // 预览
        return new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload=()=>{//读取完成
                const data=reader.result as string
                setImgPreview(data)
                submit(data)
                resolve(data)
            }
            reader.onerror=(error)=>{
                reject(error)
            }
        })

    }
    const playAudio=async()=>{
        const au=new Audio(audio)
        au.play()
    }

    return (
        <div className='card'>
            <input id='selectImge' type='file' className='input' accept='.jpg,.jpeg,.png,.gif' onChange={updateImageData} />
            <label htmlFor="selectImge" className='upload'>
                <img src={imgPreview} alt="" />
            </label>
            <div className="word">
                {word}
            </div>
            <div className="playAudio" onClick={playAudio}>

                <img width={20} src="https://res.bearbobo.com/resource/upload/Omq2HFs8/playA-3iob5qyckpa.png" alt="" />
            </div>
        </div>
    )
}
